<template>
  <div class="container">
    <div class="top-bar flex">
      <div class="top-l flex-1">
        <h2 v-text="productDetail.productName"></h2>
        <div class="top-line-text mt">产品编号：{{productDetail.productCode}}</div>
        <div class="top-line-text">产品风险等级：{{productDetail.productRiskLevel}}</div>
      </div>
      <div class="top-r">
        <img :src="productDetail.logo" alt="">
      </div>
    </div> 

    <!-- 产品介绍 -->
    <div class="product-introduce">
      <div class="title"><span>产品介绍</span></div>
      <div class="content" v-html="productDetail.productIntroduction"></div>
    </div>

    <div class="product-introduce">
      <div class="title"><span>产品价格</span></div>
      <div class="content">
        <div class="fix-charge">
          <template v-if="info.hasFixedFee == true">
          <h3>保证金收费</h3>  
          <p>价格：<span v-text="info.origPrice"></span></p>
          </template>
          <template v-if="info.hasProportionFee == true">
          <h3>收费比率</h3>  
          <table class="charge-table" cellspacing="0">
            <!-- 循环数据开始 -->
            <template v-for='item in info.proportionFeeList'>
            <tr>
              <td rowspan="3">{{item.assetRange}}</td>
              <td class="s-box">普通帐户：<span>{{item.realAmount}}‰</span></td>
            </tr>
            <tr>
              <td class="s-box">信用普通：<span>{{item.rzrqAmount}}‰</span></td>
            </tr>
            <tr>
              <td class="s-box">信用交易：<span>{{item.rzrqTradingAmount}}‰</span></td>
            </tr>
            </template>
            <!-- 循环数据结束 -->

          </table>
          </template>
        </div>
      </div>
    </div>

    <!-- <div class="product-introduce" v-for="info in moreInfo">
      <div class="title"><span v-text="info.title"></span></div>
      <div class="content" v-text="info.content"></div>
    </div> -->

    <div class="product-introduce" v-if="info.infoPushChannel">
      <div class="title"><span>接收方式</span></div>
      <div class="content" v-text="info.infoPushChannel"></div>
    </div>
    <div class="product-introduce" v-if="info.updateFrequency">
      <div class="title"><span>更新频率</span></div>
      <div class="content" v-text="info.updateFrequency"></div>
    </div>
    <div class="product-introduce" v-if="info.customerGroup">
      <div class="title"><span>适应客户</span></div>
      <div class="content" v-text="info.customerGroup"></div>
    </div>
    <div class="product-introduce" v-if="info.effectiveTime">
      <div class="title"><span>生效时间</span></div>
      <div class="content" v-text="info.effectiveTime"></div>
    </div>
    <div class="product-introduce" v-if="info.tips">
      <div class="title"><span>温馨揭示</span></div>
      <div class="content" v-text="info.tips"></div>
    </div>
<!-- 
    <div class="product-introduce">
      <div class="title"><span>适用客户</span></div>
      <div class="content">
        资产量>1000万人民币，风险承受能力为中低等级的客户
      </div>
    </div>

    <div class="product-introduce">
      <div class="title"><span>生效时间</span></div>
      <div class="content">
        签约后即时生效
      </div>
    </div>

    <div class="product-introduce">
      <div class="title"><span>温馨提示</span></div>
      <div class="content">
        股市宽幅震荡，唯理性投资方可战胜市场!
      </div>
    </div>

    <div class="product-introduce">
      <div class="title"><span>优惠信息</span></div>
      <div class="content">
        免费体验15天,些优惠只适用于本渠道
      </div>
    </div> -->

    <div class="footer">
      <a class="now-sign" href="javascript:;" @click="sign()">立即签约</a>
    </div>

    <!-- 开始测评 -->
    <div class="test-dialog-mask">
      <div class="test-dialog">
        <h3>提示</h3>
        <p>您还未完成风险等级评测，请评测后尝试继续购买</p>
        <a href="javascript:;" class="start-test">开始测评</a>
        <div class="close-btn">
          <img src="../assets/images/dialog_close.png" alt="">
        </div>
      </div>
    </div>

    <!-- 只能在营业部 -->
    <div class="only-shop-mask" v-if="onlyShop">
      <div class="test-dialog">
        <h3>提示</h3>
        <p>该产品只能在营业部申请签约</p>
        <a href="javascript:;" class="start-test" @click="onlyShop=false">确定</a>
        <div class="close-btn" @click="onlyShop=false">
          <img src="../assets/images/dialog_close.png" alt="">
        </div>
      </div>
    </div>

    <!-- 15天免费 -->
    <div class="free-dialog-mask">
      <div class="free-dialog">
        <h3>提示</h3>
        
        <p>您将拥有15天(自然日)免费期,期间不收取任何服务费<br>
        免费期结束后将自动签约,签约后的服务佣金率为0.3‰<br>
        签约期间,您可以随时发起解约
        </p>

        <a href="javascript:;" class="start-test">开始测评</a>
        <div class="close-btn">
          <img src="../assets/images/dialog_close.png" alt="">
        </div>
      </div>
    </div>

    <!-- 不符 -->
    <div class="nomatch-dialog-mask">
      <div class="nomatch-dialog">
        <h3>个人风险等级与产品不符</h3>
        <p>本产品需“相对保守型”风险承受能力，但您的风险评测等级较低，请重新评测后尝试继续购买
        </p>
        <a href="javascript:;" class="start-test">重新测评</a>
        <div class="close-btn">
          <img src="../assets/images/dialog_close.png" alt="">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Api from '@/service'
import Stores from '@/stores'

// axios.get() 这种方式也可以获取
export default {
  name: 'ProductDetail',
  data () {
    return {
      productDetail: {},
      info: {},
      finishTest: false,
      noMatch: false,
      onlyShop: false
    }
  },
  methods: {
    // increment: function(){}
    postData(){
      let _self = this;

      Api.sm.initProductDetail(_self.$route.query.productId)
      .then(function (response) {
          console.log(response.data.info)
          if(response.data.status =="success"){
            _self.info = response.data.info;
            _self.productDetail = response.data.info.productDetail;
            // 保存产品名称
            Stores.state.riskInfo.productName = _self.info.productDetail.productName;
            Stores.state.riskInfo.productId = _self.$route.query.productId;
          }

        }).catch(function (error) {
          console.log(error);
        });
    },
    sign(){
      let _self =this;
      Api.sm.getRisk(_self.$route.query.productId).then(function(response){
        console.log(response.data.info);
        if(response.data.status =="success"){
          // 保存风险信息
          Stores.state.riskInfo.clientRiskLevel = response.data.info.clientRiskLevel;
          // console.log(Stores.state.riskInfo.clientRiskLevel)
          Stores.state.riskInfo.compareTag = response.data.info.compareTag;
          Stores.state.riskInfo.prodRiskLevel = response.data.info.prodRiskLevel;
          Stores.state.riskInfo.receiptId = response.data.info.receiptId;

          _self.$router.push({path:'/RiskAnnounce',query:{productId:_self.$route.query.productId}});
        }else if(response.data.status =="error"){
          _self.onlyShop = true;
        }
      });
    }
  },
  created: function(){
    this.postData();

  },
  mounted: function(){
    // console.log(this.$route)
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  background: #F5F8FA;
  overflow: hidden;
  padding-bottom: calculateRem(60px);
  .top-bar{
    width: 100%;
    height: auto;
    padding: calculateRem(15px) calculateRem(16px);
    background: white;
    box-sizing: border-box;
    border-bottom: 1px solid #dae3ea;
    @media only screen and (min-width: 320px){
      .top-l{ max-width: 73%;}
    }
    @media only screen and (min-width: 375px){
      .top-l{ max-width: 75%;}
    }
    @media only screen and (min-width: 414px){
      .top-l{ max-width: 77%;}
    }
    .top-l{
      /*max-width: 73%;*/
      box-sizing: border-box;
      padding-right: calculateRem(8px);
      >h2{
        margin: 0;
        color: #333333;
        font-size: calculateRem(18px);
        @include break;
        line-height: calculateRem(22px);
        max-height: calculateRem(66px);
        font-weight: bold;
        overflow: hidden;
        @include mulell(3);

      }
      .top-line-text{
        font-size: calculateRem(15px);
        color: #4b4b4b;
        
      }
      .mt{
        margin-top: calculateRem(14px);
      }

    }
    .top-r{
      width: calculateRem(80px);
      height: calculateRem(80px);
      >img{
        width: 100%;
        height: 100%;
      }

    }
  }
  .product-introduce{
    width: 100%;
    height: auto;
    background: white;
    margin-top: calculateRem(10px);
    margin-bottom: calculateRem(16px);
    box-sizing: border-box;
    border-bottom: 1px solid #dae3ea;
    .title{
      height: calculateRem(42px);
      line-height: calculateRem(47px);
      box-sizing: border-box;
      padding: 0 calculateRem(16px);
      >span{
        font-size: 16px;
        color: #333;
        font-weight: bold;
        &:before{
          content: '';
          display: inline-block;
          width: calculateRem(4px);
          height: calculateRem(16px);
          background: #F21612;
          margin-right: calculateRem(8px);
          vertical-align: -2px;
        }
      }
    }
    .content{
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 0 calculateRem(16px) calculateRem(10px);
      font-size: calculateRem(15px);
      color: #4B4B4B;
      .fix-charge{
        width: 100%;
        >h3{
          width: 100%;
          margin: 0;
          line-height: calculateRem(26px);
          font-size: calculateRem(16px);
          color: #444;
        }
        >p{
          width: 100%;
          margin: 0;
          line-height: calculateRem(28px);
          font-size: calculateRem(16px);
          margin-bottom: calculateRem(5px);
          >span{
            color: #F21612;
          }
        }
        .charge-table{
          width: 100%;
          height: auto;
          border-top: 1px solid #d5d5d5;
          border-right: 1px solid #d5d5d5;

          tr{
            &:nth-child(6n+4){
              background: #fafafa;
            }
            &:nth-child(6n+5){
              background: #fafafa;
            }
            &:nth-child(6n+6){
              background: #fafafa;
            }
            td{
              width: 58%;
              border-left: 1px solid #d5d5d5;
              border-bottom: 1px solid #d5d5d5;
              font-size: 12px;
              color: #4B4B4B;
              text-align: center;
            }
            .s-box{
              height: calculateRem(38px);
              >span{
                color: #F21612;
              }
            }
          }
          
        }
      }
    }
  }

  .footer{
    width: 100%;
    height: calculateRem(60px);
    padding: 0 calculateRem(10px);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    .now-sign{
      display: block;
      width: 100%;
      height: calculateRem(50px);
      background: #E62622;
      border-radius: calculateRem(5px);
      color: white;
      font-size: calculateRem(20px);
      text-align: center;
      line-height: calculateRem(50px);
      font-weight: bold;
      
      &:active{
        background: #C51B0D;
      }

    }
  }

  .test-dialog-mask{
    position: fixed;
    background: rgba(0,15,25,.6);
    z-index: 200;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    .test-dialog{
      position: absolute;
      bottom: calculateRem(10px);
      left: calculateRem(10px);
      right: calculateRem(10px);

      border-radius: calculateRem(13px);
      height: calculateRem(224px);
      background: white;
      box-sizing: border-box;
      padding: calculateRem(10px);
      >h3{
        margin: 0;
        text-align: center;
        font-size: calculateRem(20px);
        color: #333;
        margin-top: calculateRem(18px);
      }
      >p{
        font-size: calculateRem(16px);
        color: #4b4b4b;
        text-align: center;
        @include break;
        line-height: calculateRem(24px);
        margin: 0;
        margin-top: calculateRem(14px);

      }
      .start-test{
        position: absolute;
        left: calculateRem(10px);
        right: calculateRem(10px);
        bottom: calculateRem(10px);

        display: block;
        
        height: calculateRem(50px);
        background: #E62622;
        border-radius: calculateRem(5px);
        color: white;
        font-size: calculateRem(20px);
        text-align: center;
        line-height: calculateRem(50px);
        
        &:active{
          background: #C51B0D;
        }
      }
      .close-btn{
        width: calculateRem(32px);
        height: calculateRem(32px);
        position: absolute;
        top: calculateRem(-47px);
        right: calculateRem(15px);
        border-radius: 50%;
        &:after{
          content: '';
          display: block;
          width: 2px;
          height: calculateRem(15px);
          background: rgba(255,255,255,.6);
          position: absolute;
          bottom: calculateRem(-15px);
          left: calculateRem(15px);
        }
        >img{
          width: 100%;
          height: 100%;
        }
      }
    }

  }
  .only-shop-mask{
    position: fixed;
    background: rgba(0,15,25,.6);
    z-index: 200;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // display: none;
    .test-dialog{
      position: absolute;
      bottom: calculateRem(10px);
      left: calculateRem(10px);
      right: calculateRem(10px);

      border-radius: calculateRem(13px);
      height: calculateRem(224px);
      background: white;
      box-sizing: border-box;
      padding: calculateRem(10px);
      >h3{
        margin: 0;
        text-align: center;
        font-size: calculateRem(20px);
        color: #333;
        margin-top: calculateRem(18px);
      }
      >p{
        font-size: calculateRem(16px);
        color: #4b4b4b;
        text-align: center;
        @include break;
        line-height: calculateRem(24px);
        margin: 0;
        margin-top: calculateRem(14px);

      }
      .start-test{
        position: absolute;
        left: calculateRem(10px);
        right: calculateRem(10px);
        bottom: calculateRem(10px);

        display: block;
        
        height: calculateRem(50px);
        background: #E62622;
        border-radius: calculateRem(5px);
        color: white;
        font-size: calculateRem(20px);
        text-align: center;
        line-height: calculateRem(50px);
        
        &:active{
          background: #C51B0D;
        }
      }
      .close-btn{
        width: calculateRem(32px);
        height: calculateRem(32px);
        position: absolute;
        top: calculateRem(-47px);
        right: calculateRem(15px);
        border-radius: 50%;
        &:after{
          content: '';
          display: block;
          width: 2px;
          height: calculateRem(15px);
          background: rgba(255,255,255,.6);
          position: absolute;
          bottom: calculateRem(-15px);
          left: calculateRem(15px);
        }
        >img{
          width: 100%;
          height: 100%;
        }
      }
    }

  }

  .free-dialog-mask,.nomatch-dialog-mask{
    position: fixed;
    background: rgba(0,15,25,.6);
    z-index: 200;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    .free-dialog,.nomatch-dialog{
      position: absolute;
      bottom: calculateRem(10px);
      left: calculateRem(10px);
      right: calculateRem(10px);

      border-radius: calculateRem(13px);
      height: calculateRem(254px);
      background: white;
      box-sizing: border-box;
      padding: calculateRem(10px);
      >h3{
        margin: 0;
        text-align: center;
        font-size: calculateRem(20px);
        color: #333;
        margin-top: calculateRem(11px);
      }
      >p{
        font-size: calculateRem(16px);
        color: #4b4b4b;
        text-align: left;
        @include break;
        line-height: calculateRem(24px);
        margin: 0;
        margin-top: calculateRem(14px);

      }
      .start-test{
        position: absolute;
        left: calculateRem(10px);
        right: calculateRem(10px);
        bottom: calculateRem(10px);

        display: block;
        
        height: calculateRem(50px);
        background: #E62622;
        border-radius: calculateRem(5px);
        color: white;
        font-size: calculateRem(20px);
        text-align: center;
        line-height: calculateRem(50px);
        
        &:active{
          background: #C51B0D;
        }
      }
      .close-btn{
        width: calculateRem(32px);
        height: calculateRem(32px);
        position: absolute;
        top: calculateRem(-47px);
        right: calculateRem(15px);
        border-radius: 50%;
        &:after{
          content: '';
          display: block;
          width: 2px;
          height: calculateRem(15px);
          background: rgba(255,255,255,.6);
          position: absolute;
          bottom: calculateRem(-15px);
          left: calculateRem(15px);
        }
        >img{
          width: 100%;
          height: 100%;
        }
      }
    }

  }

  .nomatch-dialog-mask{
    .nomatch-dialog{
      height: calculateRem(204px);
    }
  }

}
</style>
